---
title: bud.alias
description: Register shorthand for resolving modules
tags:
  - configuration
  - facade
---

**bud.alias** is a helper function for creating aliases. Unlike paths, aliases may be used in your application scripts and stylesheets.

**Aliases must be absolute**, so it makes sense to use [bud.path](/reference/bud.path) when defining them:

```ts
bud.alias('@components', bud.path('@src/components'))
```

Now, in application scripts or stylesheets you can use that alias in import statements to reference the components directory:

```ts
import {Dropdown} from '@components/dropdown'
```

You can also use them in .css files:

```css
.dropdown {
  background: url(@components/dropdown/dropdown.png);
}
```

## Predefined aliases

Out-of-the-box you can reference your source directory with `@src` and output directory with `@dist`.

| alias | bud.path | filesystem path  |
| :---- | :------- | :--------------- |
| @src  | @src     | `[project]/src`  |
| @dist | @dist    | `[project]/dist` |

## Naming aliases

The naming of **bud.alias** handles is not restrictive the way it is with [bud.path](/reference/bud.path). You are free to start an alias with any character you like.

One popular convention is to reference the source directory with `@`:

```ts
bud.alias('@', bud.path('@src'))
```

Now, any source asset can be easily referenced from the source root:

```ts
import {Dropdown} from '@/components/dropdown'
```

## Additional notes

### @roots/sage

Users of the [@roots/sage](/extensions/sage) extension will find a number of preset paths are available out-of-the-box:

| alias    | bud.path     | filesystem path               |
| :------- | :----------- | :---------------------------- |
| @scripts | @src/scripts | `[project]/resources/scripts` |
| @styles  | @src/styles  | `[project]/resources/styles`  |
| @fonts   | @src/fonts   | `[project]/resources/fonts`   |
| @images  | @src/images  | `[project]/resources/images`  |
